<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>工单详情</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="styles.css">
	</head>
	<style>
		/* 容器样式 */
		.editor-wrapper {
			width: 680px;
			margin: 20px auto;
			background: #fff;
			border-radius: 4px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}

		/* 头部样式 */
		.editor-header {
			padding: 16px 24px;
			border-bottom: 1px solid #e8e8e8;
			position: relative;
		}

		.editor-title {
			margin: 0;
			font-size: 18px;
			color: #333;
		}

		/* 表格样式 */
		.fee-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 14px;
		}

		.fee-table th,
		.fee-table td {
			padding: 12px 16px;
			border-bottom: 1px solid #e8e8e8;
			text-align: left;
		}

		.fee-table th {
			background: #fafafa;
			color: #666;
			font-weight: 500;
		}

		/* 输入框样式 */
		.qty-input {
			width: 72px;
			padding: 4px 8px;
			border: 1px solid #d9d9d9;
			border-radius: 2px;
			-moz-appearance: textfield;
		}

		.qty-input::-webkit-outer-spin-button,
		.qty-input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		/* 底部操作栏 */
		.action-bar {
			padding: 16px;
			background: #fff;
			text-align: right;
		}

		.action-btn {
			padding: 8px 24px;
			border: 1px solid transparent;
			border-radius: 4px;
			cursor: pointer;
			transition: all 0.3s;
		}

		.btn-close {
			background: #fff;
			border-color: #d9d9d9;
			color: #666;
		}

		.btn-submit {
			background: #1890ff;
			color: #fff;
			margin-left: 12px;
		}

		/* 总计样式 */
		.total-section {
			padding: 16px;
			border-top: 1px solid #e8e8e8;
			text-align: right;
		}
	</style>
	<body>
		<!-- 头部导航栏 -->
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
			<div class="container">
				<a class="navbar-brand" href="#">
					<img src="../img/logo.png" alt="logo" width="40" height="40" class="d-inline-block align-text-top">
					综合管理平台
				</a>
				<div class="d-flex">
					<button class="btn btn-light me-2" type="button">
						<img src="search-icon.png" alt="search" width="20" height="20">
					</button>
					<button class="btn btn-light me-2" type="button">
						<img src="chat-icon.png" alt="chat" width="20" height="20">
					</button>
					<span class="navbar-text">张三</span>
				</div>
			</div>
		</nav>

		<!-- 侧边栏 -->
		<div class="container-fluid">
			<div class="row">
				<nav id="sidebar" class="col-md-2 col-lg-2 d-md-block bg-light sidebar">
					<div class="position-sticky">
						<ul class="nav flex-column">
							<li class="nav-item">
								<a class="nav-link" href="#">
									<img src="service-icon.png" alt="service" width="20" height="20" class="me-2">服务管理
								</a>
							</li>
							<li class="nav-item">
								<a class="nav-link active" aria-current="page" href="#">
									<img src="workorder-icon.png" alt="workorder" width="20" height="20"
										class="me-2">工单管理
								</a>
							</li>
						</ul>
					</div>
				</nav>

				<!-- 主内容区域 -->
				<main class="col-md-10 col-lg-10">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb">
							<li class="breadcrumb-item"><a href="#">服务管理</a></li>
							<li class="breadcrumb-item"><a href="#">工单管理</a></li>
							<li class="breadcrumb-item active" aria-current="page">工单详情</li>
						</ol>
					</nav>
					<div class="card">
						<div class="card-header">
							<h5>维修工单</h5>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-md-6">
									<input type="hidden" id="uid" />
									<input type="hidden" id="wid" />
									<div class="mb-3">
										<label for="woNumber" class="form-label">工单编号：</label>
										<span id="woNumber">AA2222222</span>
									</div>
									<div class="mb-3">
										<h6 class="mb-2">工单信息</h6>
										<div class="row">
											<div class="col-md-6">
												<label for="contactNameDetail" class="form-label">联系人：</label>
												<span id="contactNameDetail">王文州</span>
											</div>
											<div class="col-md-6">
												<label for="contactPhoneDetail" class="form-label">联系电话：</label>
												<span id="contactPhoneDetail">13588888888</span>
											</div>
										</div>
										<div class="row">
											<div class="col-md-6">
												<label for="faultLocationDetail" class="form-label">故障位置：</label>
												<span id="faultLocationDetail">海鲜区D-6-34铺</span>
											</div>
											<div class="col-md-6">
												<label for="faultReasonDetail" class="form-label">故障原因：</label>
												<span id="faultReasonDetail">门锁坏了无法关上</span>
											</div>
										</div>
										<div class="row">
											<div class="col-md-6">
												<label for="faultImagesDetail" class="form-label">故障图片：</label>
												<div class="d-inline-block me-2">
													<img src="placeholder-img.png" alt="faultImage1" width="80"
														height="80">
													<input type="checkbox">
												</div>
											</div>
											<div class="col-md-6">
												<label for="repairDateDetail" class="form-label">维修日期：</label>
												<span id="repairDateDetail">2024-07-01</span>
											</div>
										</div>
									</div>
									<div class="mb-3">
										<h6 class="mb-2">工单信息</h6>
										<div class="row">
											<div class="col-md-6">
												<label for="contactNameDetail" class="form-label">维修人员：</label>
												<span id="wname">王大仙</span>
											</div>
											<div class="col-md-6">
												<label for="contactPhoneDetail" class="form-label">联系电话：</label>
												<span id="wphone">13588888888</span>
											</div>
										</div>
									</div>
									<div class="mb-3">
										<h6 class="mb-2">用户状态</h6>
										<div class="row">
											<div class="col-md-6">
												<label for="contactNameDetail" class="form-label">对于订单：</label>
												<span id="userstate">王大仙</span>
											</div>
										</div>
									</div>
								</div>
								<div class="mb-3 border-top pt-3">
									<h6 class="mb-2">费用清单</h6>
									<table class="table table-bordered">
										<thead>
											<tr>
												<th>项目名称</th>
												<th>服务单位</th>
												<th>服务单价（元）</th>
												<th>数量</th>
												<th>费用合计</th>
											</tr>
										</thead>
										<tbody id="tb">

										</tbody>
										<tfoot>
											<tr id="_tr">
												<td colspan="4">总计：</td>

											</tr>
										</tfoot>
									</table>
								</div>
								<div class="col-md-6 text-end">
									<div class="mb-3">
										<label for="woStatus" class="form-label">工单状态：</label>
										<img src="../img/imgZT/chuLi.png" alt="待派单" width="80" height="80">
									</div>
								</div>
							</div>
						</div>
						<div class="card-footer d-flex justify-content-center">
							<button type="button" class="btn btn-primary me-2" id="assignButton">上传费用</button>
							<button type="button" class="btn btn-secondary" id="cancelButton">取消工单</button>
						</div>
					</div>
				</main>
			</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							上传材料
						</h4>
					</div>
					<div class="modal-body">
						<table class="fee-table">
							<colgroup>
								<col width="50%">
								<col width="20%">
								<col width="20%">
								<col width="10%">
							</colgroup>
							<thead>
								<tr>
									<th>材料编号</th>
									<th>材料名称</th>
									<th>材料单位</th>
									<th>项目服务单价（元）</th>
									<th>数量</th>
									<th>费用合计</th>
								</tr>
							</thead>
							<tbody id="_tbody">

							</tbody>
							<tfoot>
								<tr>
									<td colspan="3" class="total-section">
										总计：<span id="totalCount">0</span>项
										<span style="margin-left:24px">金额总计：</span>
										￥<span id="totalAmount">0.00</span>
									</td>
								</tr>
								<tr>
									<td colspan="3" class="action-bar">
										<button class="action-btn btn-close">关闭</button>
										<button class="action-btn btn-submit">提交修改</button>
									</td>
								</tr>
							</tfoot>
						</table>
					</div>

				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<script src="../js/jquery.min.js"></script>

		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/content.min.js?v=1.0.0"></script>
		<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
		<script src="../js/request/base.js"></script>
		<script src="../js/script/chulizhong.js"></script>
	</body>
</html>